<template>
  <div id="allqr">
    <el-collapse-transition>
      <div class="header" v-show="header">
        <el-row type="flex" justify="center">
          <el-avatar
            :span="24"
            :size="80"
            :src="`https://q1.qlogo.cn/g?b=qq&nk=${user_info.qq == '' ? 1 : user_info.qq}&s=100`"
            @error="true"
          >
            <img src="../../public/imgs/logo.png" />
          </el-avatar>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24" class="text" :style="`color:${color}`">
            <h2>{{user_info.payee == '' ? '':user_info.payee}}</h2>商户收款码
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <transition name="el-zoom-in-top">
      <div v-show="qrshow">
        <el-row type="flex" justify="center">
          <div class="qrcode">
            <img :src="qrimg" />
          </div>
        </el-row>
        <el-row type="flex" justify="center" class="step">
          <el-col :xl="8" :lg="10" :md="16" :sm="18" :xs="22">
            <el-steps :active="4" align-center>
              <el-step title="长按二维码" icon="el-icon-thumb"></el-step>
              <el-step title="扫描二维码" icon="el-icon-full-screen"></el-step>
              <el-step title="输入金额付款" icon="el-icon-success"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>
<script>
import { Vue, Component } from "vue-property-decorator";
import CryptoJS from "crypto-js";
import { getUrlKey, urlEncode, Decrypt, Encrypt } from "../assets/utils";
@Component({})
export default class Allqr extends Vue {
  user_info = {};
  color = "#409eff";
  qrimg = ``;
  header = false;
  qrshow = false;
  created() {
    setTimeout(() => {
      this.header = true;
    }, 500);
    setTimeout(() => {
      this.qrshow = true;
    }, 1000);
    const mm = getUrlKey("mm");
    if (mm) {
      try {
        this.user_info = JSON.parse(Decrypt(mm));
        if (/MicroMessenger\//i.test(window.navigator.userAgent)) {
          this.qrimg = `http://qr.topscan.com/api.php?text=${urlEncode(
            this.user_info.wxCode
          )}`;
          this.color = "#67c23a";
        } else if (/Alipay/i.test(window.navigator.userAgent)) {
          window.location.href = this.user_info.zfbCode;
        } else if (/QQ\//i.test(window.navigator.userAgent)) {
          this.qrimg = `http://qr.topscan.com/api.php?text=${urlEncode(
            this.user_info.qqCode
          )}`;
          this.color = "#909399";
        } else {
          this.axios.get('long2dwz?dwzapi=urlcn&url='+urlEncode(window.location.href)).then(res => {
            this.qrimg = `http://qr.topscan.com/api.php?text=${urlEncode(
              res.data.ae_url
            )}`;
          });
        }
      } catch (err) {
        this.$router.push("notFound");
      }
    } else {
      this.$router.push("notFound");
    }
    document.querySelector("body").style.background = this.color;
  }
}
</script>

<style>
body {
  margin: 0;
}
.header {
  background: #fff;
  padding: 5% 0 2% 0;
}
.el-avatar {
  background: none;
}
.text {
  padding: 10px 20px;
  text-align: center;
}
.text h2 {
  margin: 0;
}
.qrcode {
  margin-top: 5%;
  width: 220px;
  height: 220px;
  padding: 10px;
  background: #fff;
  border-radius: 20px;
}
.qrcode img {
  width: 100%;
}
.step {
  margin-top: 5%;
}
.el-step__icon {
  background: none !important;
}
.el-step__icon-inner,
.el-step__title {
  color: #fff !important;
}
.el-step__line {
  display: none;
}
</style>